<template>
  <div class="title" 
  @dragstart.stop="handleDragStart"
  @dragend.stop="handleDragEnd"
  draggable="true">
    <span>{{classes.worker}}</span>
    <p>{{classes.time}}</p>
  </div>
</template>

<script>
export default {
  name: "date",
  data() {
    return {
      classes: {
        worker:'普通班',
        time:'09:00-17:00'
      }
    };
  },
  props: {
    shared: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    handleDragStart () {
      this.$set(this.shared, 'draggingVm', this)
      this.$el.classList.add('dragging-node')
    },
    handleDragEnd() {
      this.shared.draggingVm = null
      this.$el.classList.remove('dragging-node')
    },
  }
};
</script>

<style lang="scss">
  .title{
    background: rgb(44, 168, 162);
    width: 100px;
    height: 60px;
  }
  .dragging-node{
    background: rgba(0, 255, 34, 0.5);
    color: orange;
    opacity: 0.7;
  }
</style>
